w h y y o u a r e h e r e ?

Hexo NexT 主题添加动画插件

嗨!看我博客左上角的小人儿~(手机端就算了)

写在前面

之前刚架自己独立博客时偶然间看到了这个小动画,觉得非常有趣。奈何那时自己属于技术新手,只能眼巴巴地看着别人“高端大气上档次,炫酷狂拽叼炸天”,自己在墙角暗暗“觊觎”。

今天无聊翻看收藏夹时又看到了它,自我感觉应该有此程度的装X能力了,遂装之。

现留配置笔记,以作纪念。

添加动画插件

追根溯源

各种跟踪,代码作者貌似是这个 G 友,证据如下:

向他致敬。

添加步骤

1.
在主题配置文件 _config.yml 中预先添加如下代码:

1
2
3
4
# Some suprise plugs
suprise:
# 踢皮球动画开关
ball_enable: true

2.
在 NexT 主题目录中,打开文件 next/layout/_layout.swig 预先添加如下代码:

1
2
3
4
# 判断上面 ball_enable 开关,导入 _partials/suprise/ball.swig (此文件我们下一步添加)
{% if theme.suprise.ball_enable %}
{% include ’_partials/suprise/ball.swig’ %}
{% endif %}

3.
上一步说要导入 ball.swig ,现在就创建一个文件 next/layout/_partials/suprise/ball.swig ,这里面是显示的字 why you are here? ,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="idhyt-surprise-ball">
<div id="idhyt-surprise-ball-animation">
<!--why you are here? -->
<span id="layer0Go" class="drag">w</span>
<span id="layer1Go" class="drag">h</span>
<span id="layer2Go" class="drag">y</span>
<span id="layer3Go" class="drag"></span>
<span id="layer4Go" class="drag">y</span>
<span id="layer5Go" class="drag">o</span>
<span id="layer6Go" class="drag">u</span>
<span id="layer7Go" class="drag">a</span>
<span id="layer8Go" class="drag">r</span>
<span id="layer9Go" class="drag">e</span>
<span id="layer10Go" class="drag">h</span>
<span id="layer11Go" class="drag">e</span>
<span id="layer12Go" class="drag">r</span>
<span id="layer13Go" class="drag">e</span>
<span id="layer14Go" class="drag">?</span>
<span id="layer15Go" class="drag ball"></span>
</div>
</div>

4.
导入动画插件。在文件 next/source/css/_custom/custom.styl 最开始处添加这一句代码:

1
2
// Custom styles.
@import "_suprise/ball"; # 下一步会添加这个配置文件

5.
建立一个动画配置文件,位置:next/source/css/_custom/_suprise/ball.styl文件内容地址在这里

到此,就完成了动画的添加。

6.
如果显示的位置有些错位,可以自己试着调整 ball.styl 代码处:

另一款插件


看本博客右下角(关闭掉侧边栏)那只小猫,是另一款网友做的插件,GitHub 源码和 README 在这里

里面不仅有十几种不同的动画可供选择,而且还可以自定义。(我关闭掉了在手机端显示)

需要注意的是:

如果你觉得自己的博客单调,不妨试试。

< - 完 - >
- 坚持分享 鼓励创作 -